<template>
  <div id="chart" ref="chart"></div>
</template>

<script>
// import echarts from "echarts";
export default {
  mounted() {
    setTimeout(() => {
      this.drawLine();
    }, 0);
  },
  methods: {
    drawLine() {
      let chartDom = this.$refs.chart;

      // 基于准备好的dom，初始化echarts实例
      let myChart = chartDom && this.$echarts.init(chartDom);
      // 绘制图表
      let option = {
        // backgroundColor: "#010508",
        backgroundColor: "#fff",

        title: {
          text: "",
          x: "center",
          y: 0,
          textStyle: {
            color: "#B4B4B4",
            fontSize: 16,
            fontWeight: "normal",
          },
        },
        grid: {
          x: "18%",
          width: "75%",
          y: "12%",
        },
        xAxis: [
          {
            // type:'category',
            // data: ["1km", "2km", "3km", "4km", "5km", "6km"],
            data: ["17:00", "20:00", "21:00", "22:00", "23:00"],
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            // axisTick: {
            //     show: false
            // }
          },
        ],
        yAxis: [
          {
            name: "票房(万元）",
            nameLocation: "middle",
            nameTextStyle: {
              padding: [3, 4, 30, 6],
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                color: "#eee",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                // color: "#fff",
              },
              formatter: "{value} ",
            },
          },
        ],
        series: [
          {
            name: "票房",
            type: "line",
            smooth: true,
            showSymbol: true,
            // 矢量画五角星
            symbolSize: 0,
            yAxisIndex: 0,
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    // color: "#0161e3",
                    color: "#ffeccc",
                  },
                  {
                    offset: 1,
                    // color: "#005571",
                    color: "#ffeccc",
                  },
                ]),
                // shadowColor: "#016dd2",
                shadowBlur: 0,
              },
            },
            itemStyle: {
              normal: {
                // color: "#016dd2",
                color: "#ffb53c",
              },
            },
            // data中可以使用对象，value代表相应的值，另外可加入自定义的属性
            data: [
              {
                value: 200,
                stationName: "s1",
              },
              {
                value: 300,
                stationName: "s2",
              },
              {
                value: 500,
                stationName: "s3",
              },
              {
                value: 700,
                stationName: "s4",
              },
              {
                value: 400,
                stationName: "s5",
              },
              {
                value: 250,
                stationName: "s6",
              },
            ],
          },
        ],
      };
      myChart.resize();
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
#chart {
  height: 6rem;
}
</style>